<template>
  <div id="cake">
    <div class="classification_header">
      <div class="classification">
        <div>
          <div class="cell">
            <van-icon name="location" size=".35rem" color="#3e3e3e" />{{
              $store.state.lecakePlace
            }}
          </div>
        </div>
        <div class="tabTitle">
          <ul class="tab_list">
            <li
              v-for="(tabTitle, tabIndex) in indexTitleList"
              :key="tabIndex"
              :class="activeIndex == tabIndex ? 'active' : 'tab_li'"
              @click="changeSlide(tabIndex)"
            >
              {{ tabTitle }}
            </li>
          </ul>
        </div>
        <div>
          <button class="screen" @click="showScreenList">
            <van-icon name="wap-nav" size=".4rem" color="#3e3e3e" />筛选
          </button>
          <van-popup
            v-model="showScreen"
            position="right"
            :style="{ height: '100%', width: '70%' }"
          >
            <h2>筛选</h2>
            <dl class="taste">
              <dt>口味</dt>
              <dd v-for="(screenName, screenId) in screenList" :key="screenId">
                <a href="javascript:void(0);">{{ screenName }}</a>
              </dd>
            </dl>
            <div class="screen_btn">
              <a href="javascript:void(0);">重置</a>
              <a href="javascript:void(0);">确定</a>
            </div>
          </van-popup>
        </div>
      </div>
    </div>
    <section class="classification_body">
      <swiper ref="mySwiper" class="tab-content" :options="swiperOptions">
        <swiper-slide
          class="swiper-no-swiping"
          v-for="(tabTitle, tabIndex) in indexTitleList"
          :key="tabIndex"
        >
          <!-- 综合 -->
          <Comprehensive
            v-if="activeIndex == 0"
            :list="cakeList"
            :titleImg="titleImg"
          />
          <!-- 销量 -->
          <SalesVolume
            v-if="activeIndex == 1"
            :list="cakeList"
            :titleImg="titleImg"
          />
        </swiper-slide>
      </swiper>
    </section>
  </div>
</template>

<script>
import axios from "axios";
import Comprehensive from "../components/comprehensive"; //推荐
import SalesVolume from "../components/salesVolume.vue"; //手机
export default {
  name: "Cake",
  data() {
    return {
      cakeList: [],
      placeNameList: [],
      screenList: [],
      showPlaceName: false,
      showScreen: false,
      indexTitleList: ["综合", "销量"],
      activeIndex: 0,
      swiperOptions: {
        //禁用手动切换轮播图，需要在slide组件上加上class='swiper-no-swiping'
        noSwiping: true,
      },
      titleImg:
        "https://imagecdn.lapetit.cn/postsystem/docroot/images/app/35E909F2997A504C5E0D1AFF54C3EF89.jpg",
    };
  },
  created() {
    axios
      .get(
        "https://www.fastmock.site/mock/942dfbb577a74c49a06b657043b1622a/lecake/cakeList"
      )
      .then((res) => {
        this.cakeList = res.data.cake;
      });
    axios
      .get(
        "https://www.fastmock.site/mock/942dfbb577a74c49a06b657043b1622a/lecake/generalData"
      )
      .then((res) => {
        this.placeNameList = res.data.placeNameList;
        this.screenList = res.data.screenList;
      });
  },
  methods: {
    showScreenList() {
      this.showScreen = true;
    },
    changeSlide(index) {
      //当前点击的选项卡样式为激活状态
      this.activeIndex = index;
    },
  },
  components: { Comprehensive, SalesVolume },
};
</script>

<style scoped="scoped">
#cake {
  margin: 0;
  padding: 0;
  font-size: 0.24rem;
}
.classification_header {
  height: 0.64rem;
  line-height: 0.6rem;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.95);

  width: 100%;
}
.classification {
  padding: 0 0.2rem;
  display: flex;
  justify-content: space-between;
}
.classification_header::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #a38d6b;
  z-index: 1;
  left: 0;
  bottom: 0;
}
.cell {
  height: 100%;
  background: none;
  border: none;
  color: #3e3e3e;
}
.cell,
.van-icon,
.screen {
  vertical-align: middle;
}
#popup {
  padding: 0.1875rem 0.375rem;
  background: #ffffff;
  overflow: hidden;
}
.header {
  color: #3e3e3e;
  line-height: 0.3125rem;
}
.header p:nth-child(odd) {
  font-size: 0.375rem;
}
.header p:nth-child(even) {
  font-size: 0.25rem;
}
.body {
  padding: 0.3125rem 0.5rem;
  border-top: 1px solid #e0dcd1;
  border-bottom: 1px solid #e0dcd1;
}
.body .text {
  display: flex;
  flex-direction: column;
}
.body .text a {
  display: inline-block;
  width: 100%;
  font-size: 0.25rem;
  line-height: 0.625rem;
  color: #3e3e3e;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
.search {
  font-size: 0.25rem;
  color: #3e3e3e;
  text-decoration: none;
}
.screen {
  height: 100%;
  background: none;
  border: none;
  color: #3e3e3e;
}
.van-popup > h2 {
  font-size: 0.28rem;
  color: #a38d6b;
  height: 0.88rem;
  line-height: 0.88rem;
  border-bottom: 1px solid #d1c6af;
  padding-left: 0.32rem;
  font-weight: normal;
}
.taste ::after {
  content: " ";
  clear: both;
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
}
.taste > dt {
  font-size: 0.28rem;
  padding: 0.32rem;
  color: #939393;
}
.taste > dd {
  float: left;
  width: 29%;
  cursor: pointer;
  margin-left: 3.25%;
  text-align: center;
  position: relative;
  margin-bottom: 0.24rem;
  color: #9c9c9c;
}
.taste > dd a {
  color: #9c9c9c;
  text-decoration: none;
}
.taste > dd::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  left: 0;
  top: 0;
  border-radius: 2px;
}
.screen_btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.8rem;
}
.screen_btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #a38d6b;
  z-index: 1;
  left: 0;
  top: 0;
}
.screen_btn > a:nth-of-type(1) {
  width: 50%;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.24rem;
  color: #a38d6b;
  display: inline-block;
}
.screen_btn > a:nth-of-type(2) {
  color: #ffffff;
  background: #a38d6b;
  width: 50%;
  text-align: center;
  line-height: 0.8rem;
  font-size: 0.24rem;
  display: inline-block;
}
.tabTitle {
  overflow: auto;
}
.tab_list {
  display: flex;
  list-style: none;
}
.tab_li {
  width: 1rem;
  color: #3e3e3e;
  text-align: center;
}
.active {
  width: 1rem;
  color: orangered;
  text-align: center;
}
.classification_body {
  padding: 0.9rem 0.3rem 0;
}
.active2::before {
  content: "";
  height: 0.1rem;
  width: 0.06rem;
  background: #c81123;
  position: absolute;
  top: 40%;
  left: -0.1rem;
}
</style>